<template>
  <div class="home">
    <div class="banner">
      <img src="..//assets/image/shouyeB.png" alt="">
    </div>
    <div class="images">
      <img src="../assets/image/678.png" alt="">
    </div>
    <div class="guan">
      <div class="guan-left">
        <img src="../assets/image/laba.png" alt="">
        <span>官方公告：</span>
        <p>NPC 6个月增利系列2017年12月20日起产品正式销售11</p>
        <span class="time">2017-12-21</span>
      </div>
      <router-link class="guan-right" tag="div" to="/Notice">查看更多</router-link>
    </div>
    <div class="product">
      <div class="product-wrap">
        <div class="product-top">
          <span>精选货币商品</span>
          <p>+  更多</p>
        </div>
        <div class="product-tab">
          <div class="product-tab-left">
            <div :class="!bool&&'active'" @click="tab">
              <h3>PEB存储宝</h3>
              <p>简单介绍简单介绍</p>
            </div>
            <div :class="bool&&'active'" @click="tab">
              <h3>NPC存储宝</h3>
              <p>简单介绍简单介绍</p>
            </div>
          </div>
          <div class="product-tab-right">
            <img src="../assets/image/skkk.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="images">
      <img src="../assets/image/678.png" alt="">
    </div>
    <div class="news">
      <span class="news-title">新闻资讯</span>
      <div class="news-con">
        <div class="news-left">
          <img src="../assets/image/2.png" alt="">
        </div>
        <div class="news-right">
          <div class="news-right-top">
            <p class="ns">News</p>
            <p class="more">+  更多</p>
          </div>
          <ul class="news-list">
            <li v-for="(item,index) in lis" :key="index">
              <div>
                <p class="news-list-num">{{item.cons}}</p>
                <p class="news-list-con">{{item.ps}}</p>
              </div>
              <span>{{item.spans}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="brief">
      <div class="brief-con">
        <span class="brief-title">讯丰简介</span>
        <div class="brief-imgwrap">
          <img src="../assets/image/shouye3.png" alt="">
        </div>
      </div>
    </div>
    <div class="contact">
      <span class="contact-title">联系我们</span>
      <div class="contact-con">
        <div class="contact-left">
          <div >
            <div class="contact-left-top">
              <p class="dian"></p>
              <p class="name">您的姓名 :</p>
            </div>
            <input class="ipt" type="text">
          </div>
          <div>
            <div class="contact-left-top">
              <p class="dian"></p>
              <p class="name">您的电话 :</p>
            </div>
            <input class="ipt" type="text">
          </div>
          <div>
            <div class="contact-left-top">
              <p class="dian"></p>
              <p class="name">E-mail :</p>
            </div>
            <input class="ipt" type="text">
          </div>
          <div>
            <div class="contact-left-top">
              <p class="dian"></p>
              <p class="name">QQ号码 :</p>
            </div>
            <input class="ipt" type="text">
          </div>
          <div>
            <div class="contact-left-top">
              <p class="dian"></p>
              <p class="name">备注说明 :</p>
            </div>
            <input class="ipts" type="text">
          </div>
          <div class="submit">提交</div>
        </div>
        <div class="contact-right">
          <img src="../assets/image/9654lkijh.png" alt="">
        </div>
      </div>
    </div>
    <div class="bot">
      <img src="../assets/image/654965.png" alt="">
      <img src="../assets/image/sadfgh.png" alt="">
      <img src="../assets/image/654965.png" alt="">
      <img src="../assets/image/iuy.png" alt="">
      <img src="../assets/image/sadfgh.png" alt="">
    </div>
  </div>
  
</template>

<script>
export default {
    data(){
      return{
        bool:false,
        lis:[
          {
            cons:1,
            ps:'经纪商机构再添新力量，所剩名额屈指可数',
            spans:'2017-12-13'
          },
          {
            cons:2,
            ps:'交易平台谁规范运作谁将笑到最后',
            spans:'2017-12-13'
          },
          {
            cons:3,
            ps:'经纪商机构再添新力量，所剩名额屈指可数',
            spans:'2017-12-13'
          },
          {
            cons:4,
            ps:'ACChian引领区块3.0时代，ACC助力全球数字货币结算体系111',
            spans:'2017-12-13'
          },
          {
            cons:5,
            ps:'经纪商机构再添新力量，所剩名额屈指可数',
            spans:'2017-12-13'
          },
          {
            cons:6,
            ps:'经纪商机构再添新力量，所剩名额屈指可数',
            spans:'2017-12-13'
          },
          {
            cons:7,
            ps:'经纪商机构再添新力量，所剩名额屈指可数',
            spans:'2017-12-13'
          },
        ]

      }
    },
    methods:{
      tab(){
        this.bool=!this.bool;
      }
    }
}
</script>
<style scoped lang="scss">
.banner{
  width: 100%;
  height: 450px;
  img{
    width: 100%;
    height: 100%;
  }
}
.images{
  width: 1200px;
  height: 135px;
  margin: 60px auto 50px;
  img{
    width: 100%;
    height: 100%;
  }
}
.guan{
  width: 1200px;
  margin: 0 auto;
  padding: 24px 0;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .guan-left{
    display: flex;
    align-items: center;
    img{
      width: 20px;
      height: 20px;
    }
    span{
      color: #fe9a31;
      font-weight: bold;
      margin-left: 10px;
    }
    p{
      font-size: 14px;
      color: #666;
      width: 330px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .time{
      color: #ccc;
      font-size: 14px;
      margin-left: 10px;
    }
  }
  .guan-right{
    width: 80px;
    height: 30px;
    background: #ff9a31;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
}
.product{
  background: #f3f3f3;
  .product-wrap{
    width: 1200px;
    margin: 0 auto;
    padding: 48px 48px 88px 48px;
    .product-top{
      display: flex;
      justify-content: space-between;
      span{
        font-size: 20px;
        font-weight: bold;
        border-bottom: 2px solid #ff9a00;
      }
      p{
        width: 66px;
        height: 26px;
        background: #fff;
        border-radius: 10px;
        color: #999;
        text-align: center;
        line-height: 26px;
        font-size: 14px;
      }
    }
    .product-tab{
      margin-top: 23px;
      display: flex;
      .product-tab-left{
        div{
          margin-top: 10px;
          width: 170px;
          height: 140px;
          background: #333;
          color: #fff;
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 20px;
          h3{
            font-size: 16px;
            font-weight: bold;
            margin-left: 26px;
            margin-bottom: 14px;
          }
          p{
            margin-left: 26px;
            font-size: 14px;
            color: #999;
          }
        }
        .active{
          color: #333;
          width: 190px;
          height: 136px;
          background: #fff;
          border: 2px solid #ff6700;
          border-right: none;
          margin-left: 0;
        }
      }
    }
  }
}
.news{
  width: 1200px;
  margin: 0 auto;
  border-top:1px solid #eee;
  padding: 72px 48px 82px 52px;
  .news-title{
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px solid #ff6700;
  }
  .news-con{
    margin-top: 29px;
    display: flex;
    // align-items: center;
    justify-content: space-between;
    .news-left{
      width: 454px;
      height: 330px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .news-right{
      flex: 1;
      margin-left: 56px;
      .news-right-top{
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #000;
        .ns{
          width: 168px;
          font-size: 18px;
          border-bottom: 2px solid #ff9a00;
        }
        .more{
          width: 68px;
          height: 26px;
          border-radius: 15px;
          background: #f3f3f3;
          text-align: center;
          font-size: 14px;
          line-height: 26px;
        }
      }
      .news-list{
        li{
          margin-top: 25px;
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          div{
            display: flex;
            align-items: center;
          }
          .news-list-num{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ff6500;
            text-align: center;
            line-height: 20px;
            color: #fff;
          }
          .news-list-con{
            margin-left: 12px;
            color: #999;
            width: 422px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          span{
            color: #ccc;
          }
        }
      }
    }
  }
}
.brief{
  background-image:url('../assets/image/oiuy.png');
  height: 534px;
  .brief-con{
    width: 1200px;
    margin: 0 auto;
    padding: 46px 48px 42px 52px;
    .brief-title{
      font-size: 20px;
      font-weight: bold;
      border-bottom: 2px solid #ff6500;
    }
    .brief-imgwrap{
      margin-top: 50px;
      margin-left: 95px;
    }
  }
}
.contact{
  width: 1200px;
  margin: 0 auto;
  padding: 52px;
  .contact-title{
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px solid #ff6500;
  }
  .contact-con{
    padding: 60px 62px 12px 62px;
    display: flex;
    .contact-left{
      padding-right: 109px;
      border-right: 1px solid #999;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .contact-left-top{
        display: flex;
        .dian{
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #ff6500;
        }
        .name{
          font-size: 14px;
          color: #999;
          margin-left: 10px;
        }
      }
      .ipt{
        width: 254px;
        height: 38px;
        border-radius: 4px;
        background: #eef1f1;
        outline: none;
        border: none;
        margin-top: 16px;
      }
      .ipts{
        width: 550px;
        height: 173px;
        border-radius: 4px;
        background: #eef1f1;
        outline: none;
        border: none;
        margin-top: 16px;
      }
      .submit{
        width: 242px;
        height: 38px;
        background: #fe9a31;
        color: #fff;
        border-radius: 20px;
        text-align: center;
        line-height: 38px;
        margin:  0 auto;
      }
    }
    .contact-right{
      padding-left: 105px;
    }
  }
}
.bot{
  background: #f3f3f3;
  height: 217px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
